import useForm from "@module/useForm";
import Input from "@ui/RJMart/input";
import Icon from "@ui/RJMart/icons";
import RobinFilter from "@module/RobinFilter";
import ZenUI from "@root/components/ZenUI/ZenUI";
import usePartState from "@module/usePartState";
import RSA from "@module/EncryptPW";

export default function StepThree() {
    const params = $state.params;
    const { registerType, account, email, token } = params || {};

    const [stateObj, updateState] = usePartState({});
    function doSubmit() {
        if (!formData.password) {
            // alert("新密码不能为空");
            updateFormData({
                $$status: { password: "新密码不能为空" }
            });
            return false;
        }

        if (!formData.password2) {
            // alert("确认密码不能为空");
            updateFormData({
                $$status: { password2: "确认密码不能为空" }
            });
            return false;
        }

        const isValid = formData.$$valid;
        if (isValid) {
            // ZenUI.SL(60);
            let resetUrl = "/store/api/user/buyer/ResetPassword";
            if (params.registerType == 2) {
                resetUrl = "/suppliers/anon/ResetPassword";
            }
            let resetData = {
                account: params.account || params.email,
                token: params.token
            };
            if (params.registerType == 1) {
                resetData.password = RSA.webencryptAES(formData.password);
            } else if (params.registerType == 2) {
                resetData.password = formData.password;
            }
            REST.post(resetUrl, resetData, "dis").then(
                function(data) {
                    // ZenUI.HL();
                    console.log(data);
                    if (data.code == "0000") {
                        doStepThree();
                    } else {
                        // alert(data.message);
                        updateFormData({
                            $$status: { password2: data.message }
                        });
                    }
                },
                function(error) {
                    // ZenUI.HL();
                    console.log(error);
                }
            );
        }
    }

    function doStepThree() {
        $state.go({
            stateName: "/forgetpwd",
            params: {
                step: 4,
                account: params.account || params.email,
                registerType: params.registerType,
                forgetPwd: 1
            }
        });
    }

    const {
        formData,
        handleChange,
        handleSubmit,
        updateFormData,
        validations,
        addValidate,
        addValidateMulti
    } = useForm(doSubmit, {}, "findPwdFormStep3");

    function validateIsSame1(value) {
        let res = RobinFilter.passWordValidate(value);
        if (res) {
            return res;
        }
        if (formData.password2 && value != formData.password2) {
            return "两次输入的密码不一致";
        }
        formData.$$status.password2 = "";
        return "";
    }

    function validateIsSame2(value) {
        let res = RobinFilter.passWordValidate(value);
        if (res) {
            return res;
        }
        if (formData.password && value != formData.password) {
            return "两次输入的密码不一致";
        }
        formData.$$status.password = "";
        return "";
    }

    addValidateMulti({
        password: [validateIsSame1],
        password2: [validateIsSame2]
    });

    function beforeHandleChange(event) {
        handleChange(event);
        // console.log(formData)
    }

    return (
        <form
            className={"regi-content-form zen_p-b-80 zen_m-t-40"}
            name={"findPwdFormStep3"}
        >
            <InputItem
                name={"password"}
                title={"新密码"}
                placeholder={"由10-20位的数字、大小写字母组成"}
                type={"password"}
                handleChange={beforeHandleChange}
                formData={formData}
            />

            <InputItem
                name={"password2"}
                title={"确认密码"}
                placeholder={"请再次输入密码"}
                handleChange={beforeHandleChange}
                type={"password"}
                formData={formData}
                index={3}
            />

            <NextStep doSubmit={doSubmit} formData={formData} />
        </form>
    );
}

function InputItem(props) {
    const { title, placeholder, index, handleChange, name, type } = props;
    let formData = props.formData;

    function addName() {
        let inputEle = document.querySelector(
            `.regi-inputs-input>div[name=${name}] input`
        );
        if (inputEle) {
            inputEle.setAttribute("name", name);
        }
    }

    React.useEffect(() => {
        addName();
    }, []);

    const isValid =
        formData.$$status.hasOwnProperty(name) && formData.$$status[name]
            ? false
            : true;

    return (
        <div className={"regi-content-inputs"}>
            <div
                className={
                    index == 3
                        ? "regi-step3-label-box2"
                        : "regi-step3-label-box"
                }
            >
                <span className={"regi-content-label"}>{title}</span>
            </div>
            <div className={"regi-inputs-input"}>
                <Input
                    name={name}
                    placeholder={placeholder}
                    onChange={handleChange}
                    error={!isValid}
                    type={type}
                    statusIcon={
                        isValid ? null : (
                            <Icon
                                type="exclamation-circle-fill"
                                color="error"
                                width="18.26px"
                                height="18.26px"
                            />
                        )
                    }
                />

                {!isValid && (
                    <p className={"regi-content-error-tip"}>
                        {formData.$$status[name]}
                    </p>
                )}
            </div>
        </div>
    );
}

function NextStep(props) {
    const { doSubmit, formData } = props;
    const isValid = formData.$$valid;
    return (
        <div
            onClick={doSubmit}
            className={
                isValid ? "regi-content-next-step" : "regi-content-next-step1"
            }
        >
            <p>确定</p>
        </div>
    );
}
